<style lang="less">
    @import '../../styles/common.less';
    @import '../tables/components/table.less';
</style>

<template>
    <div>
        <Row>
            <Col>
                <Card>
                    <p slot="title">
                        <Icon type="mouse"></Icon>
                        点击搜索进行搜索
                    </p>
                    <div>
                        <Input v-model="searchConName1" placeholder="请输入角色名搜搜..." style="width: 200px" />
                        <span @click="handleSearch3" style="margin: 0 10px;"><Button type="primary" icon="search">搜索</Button></span>
                        <Button @click="handleCancel3" type="ghost" >取消</Button>
                    </div>
                    <div class="margin-top-10 searchable-table-con1">
                        <Table :columns="columns1" :data="data1"></Table>
                    </div>

                </Card>
            </Col>
            <!--<Col>
            <Card>
                <p slot="title">
                    <Icon type="android-remove"></Icon>
                    可编辑单元行
                </p>
                <div class="edittable-table-height-con">
                    <can-edit-table refs="table2" v-model="editInlineData" :columns-list="editInlineColumns"></can-edit-table>
                </div>
            </Card>
            </Col>-->
        </Row>
    </div>
</template>

<script>
import axios from 'axios';
import canEditTable from '../tables/components/canEditTable.vue';
import tableData from '../tables/components/table_data.js';
import * as table from '../tables/data/search';

export const editInlineColumns = [
    {
        title: '序号',
        type: 'index',
        width: 80,
        align: 'center'
    },
    {
        title: '角色名',
        align: 'center',
        key: 'name',
        width: 90,
        editable: true
    },
    {
        title: '排序',
        align: 'center',
        key: 'sequence'
    },
    {
        title: '状态',
        align: 'center',
        key: 'status',
        width: 150,
        editable: true
    },
    {
        title: '描述',
        align: 'center',
        key: 'description',
        width: 150,
        editable: true
    },
    {
        title: '操作',
        align: 'center',
        width: 190,
        key: 'handle',
        handle: ['edit', 'delete']
    }
];

export default {
    name: 'role-lise',
    components: {
        canEditTable
    },
    data () {
        return {
            searchConName1: '',
            columns1: editInlineColumns,
            data1: [],
            initTable1: []
        };
    },
    methods: {
        init () {
            this.data1 = this.initTable1 = table.searchTable1;
            axios.post('http://118.31.187.33:8008/base/role/list').then(res => {
                this.data1 = res.data.data.list;
            });
        },
        search (data, argumentObj) {
            let res = data;
            let dataClone = data;
            for (let argu in argumentObj) {
                if (argumentObj[argu].length > 0) {
                    res = dataClone.filter(d => {
                        return d[argu].indexOf(argumentObj[argu]) > -1;
                    });
                    dataClone = res;
                }
            }
            return res;
        },
        handleSearch3 () {
            this.data3 = this.initTable3;
            this.data3 = this.search(this.data3, {name: this.searchConName3});
        },
        handleCancel3 () {
            this.data3 = this.initTable3;
        }

    },
    mounted () {
        this.init();
    }
};
</script>
